import React, { useState, useContext } from 'react';
import PageHeader from '../Header';
import './index.less';
import logo from '@/assets/images/logo.png';
import { Link, Outlet } from 'react-router-dom';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import useMenuList, { BaseMenuListType } from './useMenuList';
import { Observer } from 'mobx-react-lite';
import { useStore } from '@/stores';
import type { MenuProps } from 'antd';

export interface baseLayoutCompProps {
  value?: string;
  children?: React.ReactNode; // 自己定义children的类型
}

type MenuItem = Required<MenuProps>['items'][number];

const { Header, Sider, Content, Footer } = Layout;
const { SubMenu } = Menu;

const getItem = (
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem => {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}

const LayoutComp: React.FC<baseLayoutCompProps> = (props) => {
  const [collapsed, setCollapsed] = useState(false);
  const [menuList] = useMenuList();
  const store = useStore();
  // const userName = store.userStore.userName || "";
  const username = sessionStorage.getItem("username")

  const handleClickLink = (item: BaseMenuListType) => {
    store.common.selectMenuItemFn(item.key)
  }

  // const items = () => {
  //   return menuList instanceof Array && menuList.map((item: BaseMenuListType, idx) => {
  //     if (item.children && item.children.length > 0) {
  //       return getItem('Submenu', `sub${idx}`, item.icon, item.children.map(child => getItem(child.label, child.key, child.icon)))
  //     }
  //     return getItem(item.label, item.key, item.icon)
  //   })
  // }

  return (
    <Observer>
      {() => (
        <Layout className="layout">
          <Sider trigger={null} collapsible collapsed={collapsed}>
            <div style={{ padding: "7px 0 7px 10px", display: "flex", alignItems: "center" }}>
              <img src={logo} alt="logo" style={{ height: "45px", width: "45px", borderRadius: "50%", marginRight: "10px" }} />
              <span style={{ color: "#fff", fontSize: '18px' }}>{username}</span>
            </div>
            <Menu
              theme="dark"
              mode="inline"
              defaultSelectedKeys={[store.common.selectMenuItem as string]}
            // items={items}
            >
              {menuList instanceof Array && menuList.map((item: BaseMenuListType) => {
                if (item.children && item.children.length > 0) {
                  return (
                    <SubMenu key={String(item.key)} title={item.label} icon={item.icon}>
                      {item.children.map(child => (
                        <Menu.Item key={String(child?.key)} icon={child?.icon}>
                          <Link to={String(child?.key)}>{child?.label}</Link>
                        </Menu.Item>
                      ))}
                    </SubMenu>
                  )
                }
                return (
                  <Menu.Item key={String(item?.key)} icon={item.icon}>
                    <Link to={String(item.key)} onClick={() => handleClickLink(item)}>{item.label}</Link>
                  </Menu.Item>
                )
              })}
            </Menu>
          </Sider>
          <Layout className="site-layout">
            <Header className="site-layout-background" style={{ padding: 0, display: 'flex' }}>
              {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                className: 'trigger',
                onClick: () => setCollapsed(!collapsed),
              })}
              <PageHeader />
            </Header>
            <Content
              className="site-layout-background"
              style={{
                margin: '24px 16px',
                padding: 24,
                minHeight: 280,
                overflow: 'auto'
              }}
            >
              <Outlet />
            </Content>
            <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
          </Layout>
        </Layout>
      )}
    </Observer>
  );
};

export default LayoutComp;